<template>
  <div class="color">
    <el-row>
      <el-col>

        <div class="watch-columns">
          <div class="columns-left">
            <div class="all">
              <a href="javascript:" class="all-product">{{product}}<i class="fa fa-navicon na " aria-hidden="true"></i></a>
            </div>
            <div class="columns">
              <ul>
                <li v-for="item in columns">
                  <a href="javascirpt:" class="columns-product">{{item.name}}</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="all-center">
            <ul>
              <!-- <li v-for="obj in center.alist">
                  <a href="javascript:" class="first">{{obj.name}}<em>/</em></a>
                  <a href="javascirpt:">{{obj.name1}}</a>
                  <a href="javascirpt:">{{obj.name2}}</a>
                  <a href="javascirpt:">{{obj.name3}}</a>
                </li> -->
              <li v-for="(item1,index) in alist" :key="index" @mouseover="showtow(index)" @mouseout="hidetow(index)">
                <a href="javascript:" class="first">{{item1.name}}<em>/</em></a>
                <a href="javascirpt:" class="first-sort">{{item1.name1}}</a>
                <a href="javascirpt:" class="first-sort">{{item1.name2}}</a>
                <a href="javascirpt:" class="first-sort">{{item1.name3}}</a>
                <div class="two" v-show="item1.twoflag">
                  <h2>品牌</h2>
                  <div class="div-table">
                    <table class="table">
                      <tr v-for="obj in 5">
                        <td>
                          <a href="javascirpt:">
                            <img src="../assets/watch2.jpg" />
                          </a>
                        </td>
                        <td>
                          <a href="javascirpt:">
                            <img src="../assets/watch3.jpg" />
                          </a>
                        </td>
                        <td>
                          <a href="javascirpt:">
                            <img src="../assets/watch5.jpg" />
                          </a>
                        </td>
                        <td>
                          <a href="javascirpt:">
                            <img src="../assets/watch2.jpg" />
                          </a>
                        </td>
                        <td>
                          <a href="javascirpt:">
                            <img src="../assets/watch3.jpg" />
                          </a>
                        </td>
                      </tr>
                    </table>
                  </div>
                  <h2>热词</h2>
                  <div class="a-btn" v-for="obj in alist[index].tablelist">
                    <a href="javascript:">{{obj.name}}</a>
                  </div>
                  <div class="tow-img">
                    <a href="javascript:" v-for="item2 in alist[index].imglist">
                      <img :src="item2.img" />
                    </a>
                  </div>
                </div>
              </li>
            </ul>
          </div>

        </div>
        <div class="chart">
          <template>
            <el-carousel :interval="5000" arrow="always" height="459px">
              <el-carousel-item v-for="(item,index) in chart" :key="index">
                <img :src="item.url" class="chart-img" />
              </el-carousel-item>
            </el-carousel>
          </template>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData3: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        product: "全部商品",
        columns: [{
            name: "男表"
          },
          {
            name: "女表"
          },
          {
            name: "极速选表"
          },
          {
            name: "品牌馆"
          },
          {
            name: "秒杀"
          },
          {
            name: "体验中心"
          },
          {
            name: "名匠维修"
          },
          {
            name: "认证二手表"
          },
          {
            name: "奢品共享"
          },
          {
            name: "手表资讯"
          }
        ],
        alist: [{
            name: "顶级品牌",
            name1: "江诗丹顿",
            name2: "宝玑",
            name3: "积家",
            twoflag: false,
            imglist: [{
              img: "//image8.wbiao.co/mall/8b4f8ad7282c4a668150a28bc0939f5e.png"
            }],
            tablelist: [{
              name: "五十"
            }, {
              name: "百达翡丽"
            }, {
              name: "复杂功能计时"
            }, {
              name: "驼飞轮"
            }, {
              name: "Master大师"
            }, {
              name: "限量款"
            }]
          },
          {
            name: "奢华品牌",
            name1: "劳力士",
            name2: "欧米茄",
            name3: "万国",
            twoflag: false,
            imglist: [{
              img: "//image8.wbiao.co/mall/02744380976b47b5b97cafe5fbd67c67.jpg"
            }],
            tablelist: [{
              name: "蓝气球"
            }, {
              name: "碟飞"
            }, {
              name: "水鬼"
            }, {
              name: "万国小王子"
            }, {
              name: "珐琅"
            }, {
              name: "镶钻表"
            }, {
              name: "历史学家系列"
            }, {
              name: "飞行员表"
            }]
          },
          {
            name: "高级品牌",
            name1: "浪琴",
            name2: "爱宝时",
            name3: "帝舵",
            twoflag: false,
            imglist: [{
              img: "//image8.wbiao.co/mall/ea6e495be1c446d5b05ea26786361001.jpg"
            }],
            tablelist: [{
              name: "名匠"
            }, {
              name: "星空表"
            }, {
              name: "依百克四驱"
            }, {
              name: "万国小王子"
            }, {
              name: "gucci"
            }, {
              name: "古董机芯"
            }]
          },
          {
            name: "轻奢时尚",
            name1: "天梭",
            name2: "赫柏林",
            name3: "美度",
            twoflag: false,
            imglist: [{
              img: "//image8.wbiao.co/mall/209ab55857504ad9b6cbe0e0499a7b01.jpg"
            }],
            tablelist: [{
              name: "李洛克"
            }, {
              name: "东方星"
            }, {
              name: "北仑赛丽"
            }, {
              name: "法国赫伯林"
            }, {
              name: "环表"
            }, {
              name: "潜水表"
            }, {
              name: "大三针"
            }, {
              name: "GMT"
            }]
          },
          {
            name: "年轻潮牌",
            name1: "卡西欧",
            name2: "迪士尼",
            name3: "漫威（MARVEL）",
            twoflag: false,
            imglist: [{
              img: "//image8.wbiao.co/mall/408d59a7a9984ac7814be41d04000ffa.jpg"
            }],
            tablelist: [{
              name: "G-SHOCK"
            }, {
              name: "swatch"
            }, {
              name: "玛莎拉蒂"
            }, {
              name: "德国红铁奖"
            }, {
              name: "漫威手表"
            }, {
              name: "蜘蛛侠"
            }]
          },
          {
            name: "国产智能",
            name1: "飞亚达",
            name2: "海鸥",
            name3: "上海",
            twoflag: false,
            imglist: [{
              img: "//image8.wbiao.co/mall/97f20d6716df42b0a28cab432826602b.jpg"
            }],
            tablelist: [{
              name: "海鸥陀飞轮"
            }, {
              name: "飞亚达"
            }, {
              name: "智能表"
            }, {
              name: "颂拓"
            }, {
              name: "佳名"
            }]
          },
          {
            name: "表带",
            name1: "积优",
            name2: "奇美拉",
            name3: "欧时浩",
            twoflag: false,
            imglist: [{
              img: "//image8.wbiao.co/mall/ef19e74842524f1eb3055f726bc2022e.jpg"
            }],
            tablelist: [{
              name: "积优"
            }, {
              name: "欧时浩"
            }, {
              name: "奇美拉"
            }, {
              name: "海奕施"
            }]
          },
          {
            name: "维修保养",
            name1: "配件更换",
            name2: "故障维修",
            name3: "手表保养",
            twoflag: false,
            imglist: [{
              img: "//image8.wbiao.co/mall/bf18510b4e5e4316a84a8ecfac5e1354.png"
            }],
            tablelist: [{
              name: "延保服务"
            }, {
              name: "电池服务"
            }, {
              name: "联保服务"
            }, {
              name: "手表维修"
            }]
          }
        ],
        chart: [{
            url: "//image8.wbiao.co/mall/276189e805574e61a5b7d03e930cd445.jpg"
          },
          {
            url: "//image8.wbiao.co/mall/703c886ab69d42bab46d3f156055e923.jpg"
          },
          {
            url: "//image8.wbiao.co/mall/5029a2b6a32142fa83459f2ca9efea4a.jpg"
          },
          {
            url: "//image8.wbiao.co/mall/8a7b853d036647a096725bd63f795590.jpg"
          },
          {
            url: "//image8.wbiao.co/mall/308e9a06e5a34255a5f580c09ddfb895.jpg"
          },
          {
            url: "//image8.wbiao.co/mall/7a6d9bde18ad4a68a70219da95d65e02.jpg"
          },
          {
            url: "//image8.wbiao.co/mall/6e1cc45cf7d74541b3173b0a95e984da.jpg"
          },
          {
            url: "//image8.wbiao.co/mall/276189e805574e61a5b7d03e930cd445.jpg"
          }
        ]

      }
    },
    components: {

    },
    methods: {
      showtow(index1) {
        this.alist[index1].twoflag = true

      },
      hidetow(index1) {
        this.alist[index1].twoflag = false
      }
    }
  }
</script>

<style scoped="scoped">
  @import url("../../static/style/font-awesome-4.7.0/css/font-awesome.css");
  .watch-columns {
    width: 1200px;
    height: 508px;
    position: relative;
    margin: 0 auto;
  }

  .watch-columns .columns-left {
    position: sticky;
    top: 0px;
    z-index: 2;
  }

  .watch-columns .columns-left .all {
    width: 202px;

  }

  .watch-columns .columns-left .all .all-product {
    display: block;
    line-height: 48px;
    padding: 0 16px;
    background-color: #b32424;
    background-image: linear-gradient(269deg, #b34747 1%, #cc5252 98%);
    color: #fff;
    font-size: 14px;
  }

  .watch-columns .columns-left .all .all-product .na {
    display: inline-block;
    float: right;
    margin-top: 16px;
    color: #f6e8e8;
  }

  .watch-columns .columns-left .columns {
    position: absolute;
    top: 0;
    left: 200px;
    width: 100%;
    background-color: #fff;

  }

  .watch-columns .columns-left .columns ul li {
    height: 48px;
    float: left;

  }

  .watch-columns .columns-left .columns ul li .columns-product {
    display: inline-block;
    line-height: 41px;
    font-size: 14px;
    color: #333;
    /* margin-right: 25px; */
    margin-left: 25px;
    padding-left: 2px;
  }

  .watch-columns .columns-left .columns ul li .columns-product:hover {
    cursor: pointer;
    border-bottom: 1px solid #d45e5e;
    border-bottom-width: 3px;
  }

  .watch-columns .all-center {
    position: absolute;
    /* width: 200px; */
    top: 48px;
    /* z-index: -1; */
    /* border: 1px solid blue; */
    background-color: #e8eef2;
  }

  .watch-columns .all-center ul li {
    width: 200px;
    height: 57.7px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

  }

  .watch-columns .all-center ul li .first {
    display: inline-block;
    font-size: 12px;
    color: #4d4d4d;
    margin-left: 4px;

  }

  .watch-columns .all-center ul li:hover {
    background-color: #fff;
    border-left: #bcab9b;
    border-left-width: 9px;
  }

  .watch-columns .all-center ul li a {
    font-size: 12px;
    color: #666;
    margin-right: 5px;
    line-height: 57px;
  }

  .watch-columns .all-center ul li .first-sort:hover {
    text-decoration: underline;
    color: #333;
  }

  .watch-columns .all-center ul li .two {
    /* border: 1px solid black; */
    /* width: 200px;
    height: 200px; */
    position: absolute;
    top: 0;
    left: 199px;
    width: 998px;
    height: 459px;
    /* z-index: -1; */
    z-index: 1;
    background-color: #fff;
  }

  .watch-columns .all-center ul li .two h2 {
    font-size: 14px;
    color: #666;
    padding-left: 7px;
    margin-left: 7px;
    margin-top: 15px;
    border-left: 1px solid #666;
    border-left-width: 4px;
    margin-bottom: 10px;
    /* z-index: -1; */
  }

  .watch-columns .all-center ul li .two .div-table {
    width: 690px;
    overflow-y: scroll;
    max-height: 270px;
    /* border: 1px solid red; */
  }

  .watch-columns .all-center ul li .two .table {
    margin-left: 7px;
    border-collapse: collapse;
  }

  .watch-columns .all-center ul li .two .table tr td {
    width: 150px;
    border: 1px solid #eee;

  }

  .watch-columns .all-center ul li .two .table tr td a {
    display: block;
    width: 110px;
    margin: 0 auto;

  }

  .watch-columns .all-center ul li .two .table tr td a img {
    max-width: 100%;
  }

  .watch-columns .all-center ul li .two .a-btn a {
    display: inline-block;
    height: 36px;
    line-height: 36px;
    padding: 0 18px;
    border: 1px solid #eee;
    border-radius: 100px;
    font-size: 14px;
    color: #666;
    margin-top: 7px;
    float: left;
  }

  .watch-columns .all-center ul li .two .a-btn a:hover {
    background-color: #bcab9b;
    color: #fff;
  }

  .watch-columns .all-center ul li .two .tow-img {
    position: absolute;
    top: 0;
    right: 0;
  }

  .watch-columns .all-center ul li .two .tow-img a {
    display: block;
    width: 200px;
  }

  .watch-columns .all-center ul li .two .tow-img a img {
    max-width: 100%;
    padding-top: 25px;
  }

  .chart {
    width: 100%;
    position: absolute;
    top: 48px;
    left: 0;
    z-index: -1;
    pointer-events: none;

  }

  .chart .chart-img {
    max-width: 100%;
    height: 100%;
  }

  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
